<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.8.5/echarts-en.js"></script>
  </head>
  <style>
    @media screen and (min-width: 1920px) {
      .screen {
        font-size: 5.2vw !important;
        max-width: 19.2em;
      }
    }
    @media screen and (max-width: 1920px) {
      .screen {
        font-size: 5.2vw !important;
        max-width: 19.2em;
      }
    }
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
    }
    .screen {
      font-size: 100px;
      width: 19.2em;
      max-width: 1920px;
      /* background: url("./222.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      background-blend-mode: multiply; */
      /* min-width: 1920px; */
      /* margin: 0 auto; */
    }

    .screen::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 10.8em;
      background-image: url("./222.jpg");
      background-size: 100% 100%;
      opacity: 0.5;
    }
    .top {
      height: 3em;
      /* background-color: red; */
      /* font-size: 0.1em;   */
    }
    .center {
      height: 3em;
      /* background-color: green; */
    }
    .bottom {
      height: 4.8em;
      /* background-color: blue; */
    }

    .flex {
      display: flex;
    }
    .flex-sub {
      flex: 1;
    }

    .fs-16 {
      font-size: 0.16em;
    }
    .justify-center {
      justify-content: center;
    }
    .align-center {
      align-items: center;
    }
    .flex-direction-column {
      flex-direction: column;
    }

    .w100.h100 {
      width: 100%;
      height: 100%;
    }
    .title {
      height: 0.3em;
      text-align: center;
    }
    /* 第一套设计 */
    .screen > .topnav {
      height: 1em;
      width: 19.2em;
    }
    .screen > .main-content {
      height: 9.8em;
    }
    .screen .main-content .left-part {
      width: 4em;
      display: flex;
      flex-direction: column;
      height: 100%;
      flex-shrink: 0;
    }
    .left-top,
    .left-center,
    .left-bottom {
      flex: 1;
    }

    .screen .main-content .right-part {
      width: 15.2em;
      height: 100%;
      flex-shrink: 0;
    }

    .right-part-top {
      height: 7em;
    }

    .right-part-top .top-left {
      width: 10em;
    }

    .right-part-top .top-right {
      width: 5.2em;
    }
    .top-right .right-top {
    }
    .top-right .right-bottom {
    }

    .right-part-bottom {
      height: 2.8em;
    }

    .right-part-bottom .bottom-left {
    }
    .right-part-bottom .bottom-right {
    }
  </style>
  <body>
    <div class="container">
      <div class="screen">
        <div class="topnav">
          <div class="title">
            <p class="fs-16">报警管理平台大屏设计方案</p>
          </div>
        </div>
        <div class="main-content flex">
          <div class="left-part">
            <div class="left-top">
              <div class="title"><p class="fs-16">图表左-1</p></div>
              <div id="lefttop" class="w100" style="height: 3em"></div>
            </div>
            <div class="left-center">
              <div class="title"><p class="fs-16">图表左-2</p></div>
              <div id="topcenter" class="w100" style="height: 3em"></div>
            </div>
            <div class="left-bottom">
              <div class="title"><p class="fs-16">图表左-3</p></div>
              <div id="top-right" class="w100" style="height: 3em"></div>
            </div>
          </div>
          <div class="right-part flex flex-direction-column">
            <div class="right-part-top flex">
              <div class="top-left flex flex-direction-column">
                <div style="height: 3em">
                  <div class="title"><p class="fs-16">报警总数：9</p></div>
                </div>
                <div class="justify-center align-center flex">
                  <div class="flex-sub">
                    <div class="title"><p class="fs-16">收费站</p></div>
                    <div class="title"><p class="fs-16">监控中心</p></div>
                  </div>
                  <div class="flex-sub">
                    <div class="title"><p class="fs-16">图表中</p></div>
                    <div id="centerleft" class="w100" style="height: 4em"></div>
                  </div>
                  <div class="flex-sub">
                    <div class="title"><p class="fs-16">道路外场</p></div>
                    <div class="title"><p class="fs-16">其他</p></div>
                  </div>
                </div>
              </div>
              <div class="top-right flex flex-direction-column">
                <div class="right-top flex-sub">
                  <div class="title"><p class="fs-16">图表右-1</p></div>
                  <div
                    id="centerright"
                    class="w100"
                    style="height: 3.2em"
                  ></div>
                </div>
                <div class="right-bottom flex-sub">
                  <div class="title"><p class="fs-16">图表右-2</p></div>
                  <div id="bottomleft" class="w100" style="height: 3.2em"></div>
                </div>
              </div>
            </div>

            <div class="right-part-bottom flex">
              <div class="bottom-left flex-sub">
                <div class="title"><p class="fs-16">图表下-1</p></div>
                <div id="bottomcenter" class="w100" style="height: 2.3em"></div>
              </div>
              <div class="bottom-right flex-sub">
                <div class="title"><p class="fs-16">图表下-2</p></div>
                <div id="bottomright" class="w100" style="height: 2.3em"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let lefttop = document.getElementById("lefttop");
    let topcenter = document.getElementById("topcenter");
    let topright = document.getElementById("top-right");
    let centerleft = document.getElementById("centerleft");
    // let center = document.getElementById("center");
    let centerright = document.getElementById("centerright");
    let bottomleft = document.getElementById("bottomleft");
    let bottomcenter = document.getElementById("bottomcenter");
    let bottomright = document.getElementById("bottomright");

    document.addEventListener("wheel", function (e) {
      e.preventDefault();
    });

    let option = {
      title: {
        text: "左上角图表",
        left: "center",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        type: "category",
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    // 生成一个折线图的option
    let option2 = {
      title: {
        text: "中上角图表",
        left: "center",
        textStyle: {
          color: "red",
        },
        show: false,
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        type: "category",
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    let option3 = {
      series: [
        {
          name: "访问来源",
          type: "pie", // 设置图表类型为饼图
          radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: [
            // 数据数组，name 为数据项名称，value 为数据项值
            { value: 235, name: "视频广告" },
            { value: 274, name: "联盟广告" },
            { value: 310, name: "邮件营销" },
            { value: 335, name: "直接访问" },
            { value: 400, name: "搜索引擎" },
          ],
        },
      ],
    };
    let myChart = echarts.init(lefttop);
    myChart.setOption(option);
    let myChart2 = echarts.init(topcenter);
    myChart2.setOption(option2);

    let myChart3 = echarts.init(topright);
    myChart3.setOption(option);
    let myChart4 = echarts.init(centerleft);
    myChart4.setOption(option3);

    // let myChart5 = echarts.init(center);
    // myChart5.setOption(option);
    let myChart6 = echarts.init(centerright);
    myChart6.setOption(option2);

    let myChart7 = echarts.init(bottomleft);
    myChart7.setOption(option);
    let myChart8 = echarts.init(bottomcenter);
    myChart8.setOption(option2);

    let myChart9 = echarts.init(bottomright);
    myChart9.setOption(option2);

    window.onresize = function () {
      myChart.resize();
      myChart2.resize();
      myChart3.resize();
      myChart4.resize();
      //   myChart5.resize();
      myChart6.resize();
      myChart7.resize();
      myChart8.resize();
      myChart9.resize();
    };
  </script>
</html>
